<!-- 商家中心 -->
<template>
	<view class="merchant-wrap">
		<view class="shopinfo-box"
			:style="'background-image: url('+BASE_URL+'/uploads/20231014/4a1f50fe125e3681d81c6f939631dfe2.png);height: 437rpx;'">
			<!-- 标题栏 -->
			<shopro-navbar back-icon-color="#fff"
				:background="{ background: `url(${$IMG_URL}/uploads/20231014/4a1f50fe125e3681d81c6f939631dfe2.png) no-repeat top center / 100% 100%`}"
				:backTextStyle="{ color: '#fff', fontSize: '36rpx', fontWeight: '500' }"
				:backText="storeDetail.is_dianyuan ? ' ' : ' '"></shopro-navbar>
			<!-- <view
				style="margin: 0;padding: 25rpx;position: absolute;top: 0;height: 437rpx;width: 100vw;background-size: 100% 100%;"
				:style="'background-image: url('+BASE_URL+'/uploads/20231014/4a1f50fe125e3681d81c6f939631dfe2.png);'">
			</view>
			<view class="" :style="[navbarInnerStyles]">

			</view> -->
			<!-- 商家信息 -->
			<view class="user-head u-flex u-row-between" v-if="0">
				<view class="shop-info">
					<view class="u-flex u-m-b-10" @tap="goStoreList">
						<text class="shop-title u-m-r-20">{{ storeDetail.name }}</text>
						<text class="iconfont icon-xiala"></text>
					</view>
					<view class="shop-address u-ellipsis-2" @tap="jump('/pages/app/merchant/info')">
						{{ storeDetail.province_name || '' }}{{ storeDetail.city_name || '' }}{{ storeDetail.area_name || '' }}{{ storeDetail.address || '' }}
					</view>
				</view>
				<!-- <button @tap="$Router.pushTab('/pages/index/user')" class="u-reset-button merchant-btn">切换个人版</button> -->
			</view>

			<view class="u-flex">
				<!-- 个人信息 -->
				<view class="info-box">
					<view class="u-flex" @tap="$Router.push('/pages/user/info')">
						<view class="head-img-wrap">
							<image class="head-img" :src="userInfo.avatar || $IMG_URL + '/imgs/base_avatar.png'"
								mode="aspectFill"></image>
						</view>
						<view class="">
							<view class="user-name u-ellipsis-1">{{ userInfo.nickname || '请登录~' }}</view>
							<!-- 等级 -->
							<view class="grade-tag tag-box u-flex">
								<image class="tag-img" src="../../../static/imgs/phone.png"
									style="width: 16rpx;height: 22rpx;" mode="">
								</image>
								<text class="tag-title">{{ userInfo.mobile }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="box">
				<view class="title x-f">
					我的订单
					<view class="all" @tap="jump('/pages/app/merchant/order', { type: 'all' })">
						全部订单
						<image src="../../../static/imgs/ri.png" style="width: 10rpx;height: 18rpx;margin-left: 12rpx;">
						</image>
					</view>
				</view>
				<view class="sh-order-box u-flex u-m-b-10">
					<!-- <view class="sh-order-box u-flex u-m-b-10 u-p-r-20"> -->
					<view class="order-box u-flex">
						<view class="order-item u-flex-col "
							@tap="jump('/pages/app/merchant/order', { type: order.type })"
							v-for="order in storeDetail.filterList2" :key="order.id">
							<view class="u-flex-col item-box u-col-center">
								<view class="item-title"
									style="font-size: 36rpx;font-family: PingFang SC;font-weight: bold;color: #333333;">
									{{ order.count||0 }}
								</view>
								<!-- <image class="order-img" :src="$IMG_URL + order.img" mode=""></image> -->
								<text class="item-title">{{ order.label }}</text>
								<!-- <view class="badge" v-if="orderNum && orderNum[order.type]">{{ orderNum[order.type] }}</view> -->
							</view>
						</view>
						<!-- <view class="order-item u-flex-col " @tap="jump('/pages/order/after-sale/list')">
						<view class="u-flex-col item-box u-col-center">
							<image class="order-img" :src="$IMG_URL + '/imgs/user/tab55.png'" mode=""></image>
							<text class="item-title">退换货</text>
						</view>
					</view> -->
					</view>

					<!-- 	<view class="order-item u-flex-col all-order " @tap="jump('/pages/order/list', { type: 'all' })">
					<image class="cut-off--line" :src="$IMG_URL + '/imgs/user/cut_off_line.png'" mode=""></image>
					<view class="u-flex-col item-box u-col-center">
						<image class="order-img" :src="$IMG_URL + '/imgs/user/all_order.png'" mode="aspectFill"></image>
						<text class="item-title">全部订单</text>
					</view>
				</view> -->
				</view>
			</view>

			<view class="box">
				<view class="title x-f">
					任职门店
				</view>
				<view class="sh-store-box">
					<view class="store-item x-f" v-for="storeInfo in storeDetail.dianyuan_list" :key="storeInfo.id">
						<view class="">
							<view class="item-title">{{ storeInfo.name }}</view>
							<view class="x-f" style="margin-top: 26rpx;">
								<view style="display: flex;align-items: center;justify-content: center;
								font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;color: #888888;">
									<image src="../../../static/imgs/openhours.png"
										style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"></image>
									营业时间：{{ storeInfo.openhours || '' }}
								</view>
							</view>
							<view class="x-f" style="margin-top: 12rpx;">
								<view style="display: flex;align-items: center;justify-content: center;
								font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;color: #888888;">
									<image src="../../../static/imgs/address.png"
										style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"></image>
									店铺地址：{{storeInfo.province_name+storeInfo.city_name+storeInfo.area_name+storeInfo.address ? storeInfo.province_name+storeInfo.city_name+storeInfo.area_name+storeInfo.address : ''}}
								</view>
							</view>
						</view>
						<image class="store-img" :src="storeInfo.image_first" mode=""></image>
					</view>
				</view>
			</view>

			<!-- 核销卡片 -->
			<view class="info-card-box u-flex u-row-between" v-if="storeDetail.hexiao">
				<view class="info-card">
					<image class="card-bg" :src="$IMG_URL + '/imgs/user/shop_info.png'" mode="aspectFill"></image>
					<view class="card-content u-flex-col">
						<view class="card-title">输码核销</view>
						<view class="u-flex card-detail-box" @tap="showInputModal = true">
							<text class="iconfont icon-21shuru icon-color1"></text>
							<text class="icon-color1 u-m-l-20">输码</text>
						</view>
					</view>
				</view>
				<view class="info-card" @tap="scanCode">
					<image class="card-bg" :src="$IMG_URL + '/imgs/user/shop_qrcode.png'" mode="aspectFill"></image>
					<view class="card-content u-flex-col">
						<view class="card-title">扫码核销</view>
						<view class="u-flex card-detail-box">
							<text class="iconfont icon-icon-test1  icon-color2"></text>
							<text class="icon-color2 u-m-l-20">扫码</text>
						</view>
					</view>
				</view>
			</view>

			<view class="cancel-shop-box" v-if="0">
				<!-- 筛选框 -->
				<view class="cancel-nav u-flex">
					<u-dropdown ref="uDropdown" activeColor="#0099E5" :borderBottom="false">
						<u-dropdown-item v-model="filter1Value" @change="changeFilter1" :title="filter1Label"
							:options="filterList1"></u-dropdown-item>
						<u-dropdown-item v-model="filter2Value" @change="changeFilter2" :title="filter2Label"
							:options="filterList2"></u-dropdown-item>
					</u-dropdown>
				</view>
				<!-- 销量 -->
				<view class="sales-volume-box u-flex u-row-between u-p-30">
					<view class="sales-volume u-flex u-row-center u-col-center">订单量(单)：{{ orderInfo.total_num || 0 }}
					</view>
					<view class="sales-volume u-flex u-row-center u-col-center">交易额(元)：{{ orderInfo.total_money || 0 }}
					</view>
					<view class="sales-volume u-flex u-row-center u-col-center" v-if="!storeDetail.is_dianyuan">
						充值额(元)：{{ orderInfo.cz || 0 }}
					</view>
					<view class="sales-volume u-flex u-row-center u-col-center" v-if="!storeDetail.is_dianyuan">
						关注量(人)：{{ orderInfo.gz || 0 }}
					</view>
					<view class="sales-volume u-flex u-row-center u-col-center" v-if="!storeDetail.is_dianyuan">
						新店量(个)：{{ orderInfo.xd || 0 }}
					</view>
					<view class="sales-volume u-flex u-row-center u-col-center" v-if="!storeDetail.is_dianyuan">
						投诉率(%)：{{ orderInfo.ts || 0 }}
					</view>
				</view>
			</view>

			<!-- 订单列表 -->
			<view class="order-list" v-for="order in storeOrderList" :key="order.order_sn"
				@tap="jump('/pages/app/merchant/detail', { orderId: order.id })">
				<view class="order-head u-flex u-row-between">
					<text class="no">订单编号：{{ order.order_sn }}</text>
					<text class="state">{{ order.status_name }}</text>
				</view>
				<view class="goods-order" v-for="item in order.item" :key="item.id">
					<shopro-mini-card :title="item.goods_title" :image="item.goods_image">
						<template #describe>
							<view class="order-sku u-ellipsis-1">
								<text class="order-num">数量:{{ item.goods_num || 0 }};</text>
								{{ item.goods_sku_text ? item.goods_sku_text : '' }}
							</view>
						</template>
						<template #cardBottom>
							<view class="order-price-box u-flex ">
								<text class="order-price font-OPPOSANS">￥{{ item.goods_price || 0 }}</text>
								<button class="u-reset-button status-btn"
									v-if="item.status_name">{{ item.status_name }}</button>
							</view>
						</template>
					</shopro-mini-card>
				</view>
				<view class="order-bottom u-flex">
					<view class="u-flex u-m-r-30" v-if="reduceAdd(order.item, 'discount_fee')">
						<text class="total-price-title">优惠：</text>
						<text class="total-price">{{ reduceAdd(order.item, 'discount_fee') }}</text>
					</view>
					<view class="u-flex">
						<text class="total-price-title">实付款：</text>
						<text class="total-price">{{ reduceAdd(order.item, 'pay_price') }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 置空页 -->
		<u-empty :show="isEmpty" margin-top="160" mode="list"></u-empty>

		<!-- 更多 -->
		<u-loadmore v-if="storeOrderList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		<!-- 日期选择 -->
		<u-calendar v-model="showCalendar" safeAreaInsetBottom mode="range" start-text="开始" end-text="结束"
			range-color="#0099E5" range-bg-color="rgba(76,184,157,0.13)" active-bg-color="#0099E5"
			:customStyle="{ background: 'linear-gradient(90deg, #0099E5, #0099E5)', boxShadow: '0 7rpx 11rpx 2rpx rgba(4cb89d, 0.34)' }"
			btnType="success" @change="selDate"></u-calendar>

		<!-- 输码弹窗 -->
		<u-popup v-model="showInputModal" mode="center" :closeable="true" close-icon-pos="top-left" border-radius="20">
			<view class="modal-box u-flex-col u-col-center">
				<view class="modal-head u-flex-col u-col-center">
					<image class="modal-head-img" :src="$IMG_URL + '/imgs/modal/store_check.png'" mode=""></image>
					<text class="modal-head-title">输码核销</text>
				</view>
				<input class="inp" type="number" v-model="qrcode" placeholder="在此输入核销码" placeholder-class="pl-inp" />
				<button class="u-reset-button post-btn" @tap="onConfirm">核销</button>
			</view>
		</u-popup>
		<!-- 禁用弹窗 -->
		<u-modal ref="uModal" v-model="showModal" :show-cancel-button="false" confirm-color="#999" confirm-text="返回"
			content="当前门店已被禁用,是否返回重新选择？" title="提示" @confirm="$Router.back()"></u-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import Auth from '@/shopro/permission/index.js';
	import {
		HAS_LIVE,
		BASE_URL
	} from '@/env';
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	export default {
		components: {},
		data() {
			return {
				BASE_URL: BASE_URL,
				isEmpty: false,
				showModal: false,
				// 筛选
				filter1: 'month',
				filter1Value: 3,
				filter1Label: '本月',
				filterList1: [{
						label: '今日',
						value: 0,
						parmas: 'today'
					},
					{
						label: '昨日',
						value: 1,
						parmas: 'yesterday'
					},
					{
						label: '本周',
						value: 2,
						parmas: 'week'
					},
					{
						label: '本月',
						value: 3,
						parmas: 'month'
					},
					{
						label: '自定义',
						value: 4,
						parmas: 'custom'
					}
				],
				filter2: 'all',
				filter2Value: 0,
				filter2Label: '全部',
				filterList2: [{
						label: '全部',
						value: 0,
						parmas: 'all'
					},
					{
						label: '待指派',
						value: 1,
						parmas: 'noput'
					},
					// {
					// 	label: '待发货',
					// 	value: 1,
					// 	parmas: 'nosend'
					// },
					// {
					// 	label: '待完成',
					// 	value: 2,
					// 	parmas: 'noget'
					// },
					{
						label: '收货中',
						value: 2,
						parmas: 'put'
					},
					{
						label: '清洗中',
						value: 3,
						parmas: 'nosend'
					},
					{
						label: '待送回',
						value: 4,
						parmas: 'noget'
					},
					{
						label: '已完成',
						value: 5,
						parmas: 'finish'
					}
				],
				custom: [], //自定义日期

				storeOrderList: [], //订单商品列表
				orderInfo: {}, //订单统计信息
				storeDetail: {}, //门店信息
				cancelType: '', //核销分类
				scanCodes: '', //扫码内容。
				showInputModal: false, //输码核销
				qrcode: '', //输码
				showCalendar: false, //日期选择

				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1
			};
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo', 'userOtherData']),
			// 导航栏内部盒子的样式
			navbarInnerStyles() {
				let style = {};
				style.height = this.statusBarHeight + this.navbarHeight + 'px';
				// #ifdef MP
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.marginRight = rightButtonWidth + 'px';
				// #endif
				return style;
			},
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 44;
				// #endif
				// #ifdef MP
				return systemInfo.platform == 'ios' ? 44 : 48;
				// #endif
			}
		},
		onLoad(options) {
			options && options.storeId && uni.setStorageSync('storeId', options.storeId);
			this.getStoreDetail();
		},
		onShow() {
			this.getStoreDetail();
			this.currentPage = 1;
			this.lastPage = 1;
			this.storeOrderList = [];
			this.getStoreOrder();
		},
		onPullDownRefresh() {
			this.currentPage = 1;
			this.lastPage = 1;
			this.storeOrderList = [];
			this.getStoreOrder();
		},
		onReachBottom() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getStoreOrder();
			}
		},
		methods: {
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},

			/**
			 * 累加某字段值
			 * @param {Array} list  - 源数据
			 * @param {String} key - 键名
			 */
			reduceAdd(list, key) {
				return list.reduce((pre, cur) => (pre += Number(cur[key])), 0);
			},

			// 筛选
			changeFilter1(e) {
				if (e === 4) {
					this.showCalendar = true;
				} else {
					this.filter1 = this.filterList1[e].parmas;
					this.filter1Label = this.filterList1[e].label;
					this.onFilter();
				}
			},
			changeFilter2(e) {
				this.filter2 = this.filterList2[e].parmas;
				this.filter2Label = this.filterList2[e].label;
				this.onFilter();
			},

			// 选择门店
			goStoreList() {
				this.$Router.replace({
					path: '/pages/app/merchant/list'
				});
			},

			// 获取门店信息
			getStoreDetail() {
				// if (uni.getStorageSync('storeId')) {
					let that = this;
					that.$http('store.info', {
						type: 'index',
						store_id: uni.getStorageSync('storeId')
					}).then(res => {
						if (res.code === 1) {
							that.storeDetail = res.data;
							if (that.storeDetail.is_dianyuan) {
								that.filterList2 = [
									// {
									// 	label: '全部',
									// 	value: 0,
									// 	parmas: 'all'
									// },
									{
										label: '待收衣',
										value: 1,
										parmas: 'put'
									},
									{
										label: '已取衣',
										value: 2,
										parmas: 'nosend'
									},
									{
										label: '待送回',
										value: 3,
										parmas: 'noget'
									},
									{
										label: '已送回',
										value: 4,
										parmas: 'finish'
									}
								];
							}
						} else {
							uni.removeStorageSync('storeId');
							that.showModal = true;
						}
					});
				// }
			},

			// 扫码
			async scanCode() {
				let platform = this.$platform.get();
				let authState = await new Auth('camera').check();
				// #ifdef H5
				if (platform === 'H5') {
					this.$u.toast('普通浏览器不支持扫码功能，请使用小程序或微信内浏览器');
				} else {
					this.$wxsdk.scanQRCode(res => {
						this.scanCodes = res.resultStr;
						this.postOrderConfirm();
					});
				}
				// #endif

				// #ifndef H5
				authState &&
					uni.scanCode({
						success: res => {
							this.scanCodes = res.result;
							this.postOrderConfirm();
						},
						fail: err => {
							console.log(err);
						}
					});
				// #endif
			},

			// 输码
			onConfirm() {
				this.showInputModal = false;
				this.scanCodes = this.qrcode;
				this.postOrderConfirm();
			},
			// 核销
			postOrderConfirm() {
				let that = this;
				that.$http(
					'store.orderConfirm', {
						codes: that.scanCodes,
						store_id: uni.getStorageSync('storeId')
					},
					'核销中...'
				).then(res => {
					uni.vibrateLong({
						success: () => {
							that.$u.toast(res.msg);
						}
					});
					if (res.code === 1) {
						that.$u.toast(res.msg);
						that.scanCodes = '';
						that.storeOrderList = [];
						that.qrcode = '';
						that.getStoreOrder();
					}
				});
			},

			// 门店订单列表
			getStoreOrder() {
				return;
				let that = this;
				that.loadStatus = 'loading';
				that.$http(
					'store.order', {
						date_type: that.filter1,
						date: that.custom,
						type: that.filter2,
						page: that.currentPage,
						store_id: uni.getStorageSync('storeId')
					},
					'加载中...'
				).then(res => {
					uni.stopPullDownRefresh();
					if (res.code == 1) {
						that.storeOrderList = [...that.storeOrderList, ...res.data.result.data];
						that.isEmpty = !that.storeOrderList.length;
						that.orderInfo = res.data;
						that.lastPage = res.data.result.last_page;
						that.loadStatus = that.currentPage < res.data.result.last_page ? 'loadmore' : 'nomore';
					}
				});
			},

			// 选择日期
			selDate(e) {
				this.custom = [];
				this.custom.push(e.startDate);
				this.custom.push(e.endDate);
				this.isShowDropDown = false;
				this.filter1Label = `${e.startDate.replace(/-/g, ':')}-${e.endDate.replace(/-/g, ':')}`;
				this.onFilter();
			},

			// 选择筛选
			onFilter(val, title) {
				this.storeOrderList = [];
				this.currentPage = 1;
				this.getStoreOrder();
			}
		}
	};
</script>

<style lang="scss">
	// 遮罩
	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 20;
	}

	// 商户信息
	.shopinfo-box {
		background: url($IMG_URL+'/imgs/user/shop_headbg.png') no-repeat;
		background-size: 100% 100%;
		height: 320rpx;

		.user-head {
			padding-top: 10rpx;

			.shop-info {
				padding-left: 30rpx;

				.shop-title {
					font-size: 34rpx;
					font-weight: bold;
					color: rgba(255, 255, 255, 1);
				}

				.icon-xiala {
					font-size: 34rpx;
					color: rgba(255, 255, 255, 1);
				}

				.shop-address {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					width: 540rpx;
				}
			}

			.merchant-btn {
				padding: 0;
				width: 136rpx;
				line-height: 46rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 23rpx 0px 0px 23rpx;
				font-size: 20rpx;

				font-weight: 500;
				color: #0099E5;
			}
		}
	}

	// 卡片
	.info-card-box {
		background-color: #fff;
		padding: 30rpx 20rpx;

		.info-card {
			position: relative;
			width: 350rpx;
			height: 165rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.card-bg {
				width: 100%;
				height: 100%;
			}

			.card-content {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 3;
				top: 0;
				left: 0;
				padding: 30rpx 0 0 30rpx;

				.card-title {
					font-size: 28rpx;

					font-weight: bold;
					color: rgba(255, 255, 255, 1);
				}

				.card-detail-box {
					padding: 10rpx 20rpx;
					height: 45rpx;
					background: rgba(255, 255, 255, 1);
					width: 150rpx;
					border-radius: 23rpx;
					margin-top: 20rpx;

					.card-detail {
						font-size: 22rpx;

						font-weight: 500;
					}

					.icon-color1 {
						color: #00b6ce;
						font-size: 24rpx;
					}

					.icon-color2 {
						color: #0f98f9;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	// 核销nav
	.cancel-nav {
		background: #fff;
		margin: 10rpx 0 0;
		position: relative;
		z-index: 22;
		padding: 0 20rpx;
	}

	// 销量
	.sales-volume-box {
		background-color: #fff;
		flex-wrap: wrap;
		padding: 10rpx 30rpx !important;

		.sales-volume {
			width: 338rpx;
			height: 72rpx;
			background: rgba(0, 153, 229, 0.06);
			border: 1rpx solid #0099E5;
			border-radius: 10rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #0099E5;
			margin: 10rpx 0;
		}
	}

	// 输码弹窗
	.modal-box {
		background: #fff;
		width: 610rpx;
		margin: 0 auto;
		border-radius: 20rpx;

		.modal-head {
			width: 100%;

			.modal-head-img {
				width: 100%;
				height: 213rpx;
			}

			.modal-head-title {
				font-size: 35rpx;

				font-weight: bold;
				color: #343434;
				line-height: 42rpx;
			}
		}

		.inp {
			width: 501rpx;
			height: 78rpx;
			border: 1rpx solid #e5e5e5;
			margin: 60rpx auto 40rpx;
			font-size: 28rpx;

			font-weight: 400;
			color: #6d5028;
			padding-left: 20rpx;

			.pl-inp {
				color: #9a9a9a;
			}
		}

		.post-btn {
			width: 492rpx;
			line-height: 70rpx;
			background: linear-gradient(90deg, #0099E5, #0099E5);
			box-shadow: 0px 7rpx 6rpx 0px rgba(#0099E5, 0.22);
			border-radius: 35rpx;
			font-size: 28rpx;

			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			padding: 0;
			margin-bottom: 60rpx;
		}
	}

	// 订单列表
	.order-list {
		background: #fff;
		margin: 20rpx 0;
		padding: 0 20rpx;

		.order-bottom {
			justify-content: flex-end;
			height: 80rpx;
			padding: 0 20rpx;

			.total-price-title {
				color: #999999;
				font-size: 24rpx;
			}

			.total-price {
				color: #333;
				font-size: 26rpx;

				&::before {
					content: '￥';
					font-size: 20rpx;
				}
			}
		}

		.order-head {
			padding: 0 25rpx;
			height: 77rpx;
			border-bottom: 1rpx solid #dfdfdf;

			.no {
				font-size: 26rpx;
				color: #999;
			}

			.state {
				font-size: 26rpx;
				color: #0099E5;
			}
		}

		.goods-order {
			border-bottom: 1px solid rgba(223, 223, 223, 0.5);
			padding: 20rpx;
			margin-bottom: 20rpx;

			.order-sku {
				font-size: 24rpx;

				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				width: 450rpx;
				margin-bottom: 20rpx;

				.order-num {
					margin-right: 10rpx;
				}
			}

			.order-price-box {
				.status-btn {
					height: 32rpx;
					border: 1rpx solid #0099E5;
					border-radius: 15rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #0099E5;
					padding: 0 10rpx;
					margin-left: 20rpx;
					background: rgba(0, 153, 229, 0.16);
				}

				.order-price {
					font-size: 26rpx;

					font-weight: 600;
					color: rgba(51, 51, 51, 1);
				}
			}
		}
	}

	.info-box {
		padding-left: 30rpx;
		padding-top: 20rpx;

		.head-img-wrap {
			position: relative;

			.refresh-btn {
				position: absolute;
				padding: 0;
				background: none;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background: #0099E5;
				top: -10rpx;
				right: 10rpx;
			}
		}

		.head-img {
			width: 94rpx;
			height: 94rpx;
			border-radius: 50%;
			background: #ccc;
			margin-right: 25rpx;
			overflow: hidden;
		}

		.user-name {
			font-size: 30rpx;
			font-weight: 500;
			color: #fff;
			padding: 0 18rpx;
			font-size: 40rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			font-size: 40rpx;
		}
	}

	.tag-box {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 22rpx;
		// margin-left: 10rpx;
		background: #FCFDFE;
		box-shadow: 0rpx 4rpx 4rpx 0rpx #F3F2FA;
		border-radius: 20rpx;
		padding: 0 18rpx;
		justify-content: center;

		.tag-img {
			display: inline-block;
			margin-right: 10rpx;
		}

		.tag-title {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #565656;
			opacity: 0.8;
		}
	}

	.box {
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 25rpx;
		overflow: hidden;
	}

	.all {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.title {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		padding: 30rpx 30rpx 10rpx 30rpx;
		justify-content: space-between;
	}

	.badge {
		position: absolute;
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		line-height: 24rpx;
		padding: 4rpx 10rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 24rpx;
		z-index: 9;
		background-color: $u-type-error;
		transform: scale(0.8);
		transform-origin: center center;
		left: 100rpx;
		top: -6rpx;
		white-space: nowrap;
	}

	// 订单卡片
	.sh-order-box {
		height: 180rpx;
		height: 150rpx;
		background: #fff;

		.order-box {
			flex: 4;
		}

		.all-order {
			position: relative;

			.cut-off--line {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: (750rpx/5) - 15rpx;
				width: 30rpx;
				height: 136rpx;
			}
		}

		.order-item {
			flex: 1;

			.item-box {
				position: relative;
			}

			.order-img {
				width: 62rpx;
				height: 62rpx;
			}

			.item-title {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				line-height: 24rpx;
				margin-top: 30rpx;

				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.box {
		overflow: hidden;
		border-radius: 10rpx;
	}

	.sh-store-box {
		.store-item {
			justify-content: space-between;
			margin: 28rpx;
			padding-bottom: 28rpx;
			border-bottom: solid 1rpx rgb(246, 246, 246);
		}

		.store-item:last-child {
			padding-bottom: 0rpx;
			border-bottom: solid 0rpx rgb(246, 246, 246);
		}

		.item-title {
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
		}

		.store-img {
			width: 78rpx;
			height: 78rpx;
		}
	}

	.u-flex-col {
		flex-direction: column;
	}
</style>